<template>
  <view>
    <view class="sticky-header">
      <!-- #ifndef MP-WEIXIN -->
      <my-navbar
        title="选择菜谱"
        color="#000"
        leftText=""
        @leftClick="back"
        background="#ffffff"
      ></my-navbar>
      <!-- #endif -->
      <view class="search">
        <u-search
          placeholder="菜谱名称"
          v-model="searchValue"
          @search="handSearch"
          @custom="handSearch"
          @clear="handSearch"
        ></u-search>
      </view>
    </view>
    <view class="recipe">
      <view class="recipe-item" v-for="item in list" :key="item.id">
        <view class="recipe-header">
          <view class="recipe-name flex-btw">
            <text>{{ item.name }}</text>
            <u-input
              v-model="item.num"
              type="number"
              placeholder="输入数量"
              input-align="right"
              @input="validateNum(item, $event)"
            />
          </view>
          <view class="recipe-time flex-btw">
            <text>{{ item.date_range }}</text>
            <view class="choose-button" @click="recipeChoose(item)"
              >选择菜谱</view
            >
          </view>
        </view>
        <view class="recipe-footer flex-center" @click="changePopup(item)">
          <text>菜谱详情</text> <u-icon name="arrow-right" size="20"></u-icon>
        </view>
      </view>
    </view>
    <choosePopup :showPopup="showPopup" @close="changePopup" :popupList="popupList"></choosePopup>
  </view>
</template>

<script>
import choosePopup from "./choosePopup.vue";
import { $https } from "@/static/js/request.js";
export default {
  components: { choosePopup },
  data() {
    return {
      searchValue: "", // 搜索
      list: [], // 菜谱列表
      currentPage: 1, // 当前页数
      hasMore: true, // 是否有更多数据
	  	showPopup: false,
			popupList: []
    };
  },
  onShow() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      if (this.currentPage == 1) {
        this.list = [];
        this.hasMore = true;
      }
      let params = {
        page: this.currentPage,
        pagesize: 10,
        name: this.searchValue,
      };
      $https("GET", "packageMenuList", params, (res) => {
        if (res.data.errcode == 0) {
          const list = res.data.data.map((item) => ({
            num: "",
            ...item,
          }));
          this.list = this.list.concat(list);
          this.hasMore = list.length === this.pageSize; // 判断是否还有更多数据
        } else {
          uni.showToast({
            title: res.data.errmsg,
            icon: "none",
          });
        }
      });
    },
    validateNum(item, e) {
      // 检查是否是数字并且大于0
      if(e) {
        if (e && !isNaN(e) && e > 0) {
          item.num = e;
        } else {
          this.$nextTick(() => {
            item.num = 1;
          })
        }
      }else {
        this.$nextTick(() => {
          item.num = '';
        })
      }
    },
    // 搜索
    handSearch() {
      this.currentPage = 1;
      this.getData();
    },
    // 选择菜谱
    recipeChoose(item) {
      if (item.num == "") item.num = 1;
      uni.navigateTo({
        url: `/subpack/recipe/recipeOrder?id=${item.id}&num=${item.num}`,
      });
    },
    // 返回
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
		changePopup(item) {
			this.showPopup = !this.showPopup
			if(this.showPopup) {
				$https("GET", "menuGoods", {
					id: item.id
				}, (res) => {
					if (res.data.errcode == 0) {
						this.popupList = res.data.data
					} else {
						uni.showToast({
							title: res.data.errmsg,
							icon: "none",
						});
					}
				});
			}
		}
  },
  onReachBottom() {
    if (!this.hasMore) return;
    this.page++;
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.search {
  padding: 10rpx 30rpx;
  background-color: #ffffff;
  /deep/.u-content {
    height: 80rpx !important;
    background: #edeff2;
  }
  /deep/.u-action {
    font-size: 32rpx !important;
    color: rgba(0, 0, 0, 0.85) !important;
  }
}
.recipe {
  padding: 20rpx 30rpx;
  .recipe-item {
    width: 690rpx;
    background: #ffffff;
    border-radius: 20rpx;
    padding: 15rpx 30rpx;
    margin-bottom: 20rpx;
    .recipe-header {
      text {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 30rpx;
        color: rgba(0, 0, 0, 0.95);
      }
      .choose-button {
        border: 1px solid #40ae36;
        border-radius: 10rpx;
        padding: 12rpx 16rpx;
        font-family: PingFang SC;
        font-size: 26rpx;
        color: #40ae36;
      }
    }
    .recipe-footer {
      border-top: 1px solid #ececec;
      margin-top: 20rpx;
      padding-top: 10rpx;
      text {
        margin-right: 8rpx;
      }
    }
  }
}
</style>
